import { Button, View } from "@tarojs/components";
import { useState } from "react";
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
import { AtTextarea } from "taro-ui";
import "./index.scss";
export default (props: any) => {
  const [isOpened, SetIsOpened] = useState<boolean>(false);
  const [value, SetValue] = useState<string>("");

  return (
    <View className="remarks_wrapper">
      <View
        className="remarks"
        onClick={() => {
          SetIsOpened(true);
        }}
      >
        <View>备注</View>
        <View className="at-icon at-icon-chevron-right"></View>
      </View>
      <AtModal isOpened={isOpened}>
        <AtModalHeader>添加备注信息</AtModalHeader>
        <AtModalContent>
          <AtTextarea
            value={value}
            onChange={value => {
              SetValue(value);
            }}
            maxLength={200}
            placeholder="请输入备注信息"
          ></AtTextarea>
        </AtModalContent>
        <AtModalAction>
          {" "}
          <Button
            onClick={() => {
              SetIsOpened(false);
            }}
          >
            取消
          </Button>{" "}
          <Button
            onClick={() => {
              SetIsOpened(false);
              props.getRemark(value);
            }}
          >
            确定
          </Button>{" "}
        </AtModalAction>
      </AtModal>
    </View>
  );
};
